<template>
  <div id="register">
    <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
      <a-form-item field="userName" label="Username">
        <a-input
          v-model="form.userName"
          placeholder="please enter your username"
        />
      </a-form-item>

      <a-form-item field="passWord" label="Password">
        <a-input-password
          v-model="form.passWord"
          placeholder="Please enter your password"
          allow-clear
        />
        <!-- <a-input v-model="form.post" placeholder="please enter your post..." /> -->
      </a-form-item>

      <a-form-item field="checkPwd" label="checkPwd">
        <a-input-password
          v-model="form.checkPwd"
          placeholder="Please enter password again"
          allow-clear
        />
        <!-- <a-input v-model="form.post" placeholder="please enter your post..." /> -->
      </a-form-item>

      <a-form-item field="isRead">
        <a-checkbox v-model="form.isRead"> I have read the manual </a-checkbox>
      </a-form-item>

      <a-form-item>
        <a-button html-type="register">new register</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
    
    <script>
import { reactive } from "vue";
import axios from "axios";

export default {
  setup() {
    const form = reactive({
      userName: "",
      passWord: "",
      checkPwd: "",
      isRead: false,
    });
    return {
      form,
    };
  },
  methods: {
    handleSubmit() {
      if (
        this.form.userName == "" ||
        this.form.passWord == "" ||
        this.form.checkPwd == ""
      ) {
        alert("姓名、密码、确认密码不能为空");
      }
      if (this.form.passWord !== this.form.checkPwd) {
        alert("密码与确认密码不相等");
      } else {
        axios
          .post("/user/register", {
            userName: this.form.userName,
            userPwd: this.form.passWord,
            checkPassword: this.form.checkPwd,
          })
          .then((Response) => {
            console.log(Response.data);
            if (Response.data > 0) {
              alert("注册成功");
              this.$router.replace("/");
            } else {
              alert("注册失败");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
  },
};
</script>

<style>
</style>